<template>
  <div class="login-container">
    <div class="logo-container">
      <image src="../../static/bg.jpg" class="logo-top"></image>
    </div>
    <div class="bw" style="width: 85%;margin: 0 auto;">
      <div class="welcome-text">
        欢迎登录<image src="../../static/top_bg.png" class="logo"></image
        >商家后台
      </div>
      <div class="input-label">请输入您的账号</div>
      <div class="input-field">
        <input
          maxlength="11"
          type="text"
          v-model="phoneNum"
          class="input_class"
        />
      </div>
      <div class="input-label">请输入您的密码</div>
      <div class="input-field">
        <input type="password" v-model="password" class="input_class" />
      </div>
      <div class="input-label">请输入验证码</div>
      <div class="input-field captcha-container">
        <input maxlength="6" v-model="loginCode" class="input_class" />
        <image :src="imgCode" class="captcha-image"></image>
      </div>
      <button :class="!isTrue ? 'falsecalss' : 'truecalss'" @click="loginFun">
        登 录
      </button>
    </div>
    <!-- <div class="register-link" @click="gotoAddUser">注册</div> -->
  </div>
</template>

<script>
import {
  tokenphone,
  getOpenId,
  phonetokenadmin,
} from "../../utils/request_api.js";
import {
  oauthwx,
  adminApph6login,
  complaintUpdate,
} from "../../utils/request_doc.js";
import website from "../../utils/website.js";

export default {
  data() {
    return {
      phoneNum: "",
      password: "",
      imgCode: "",
      loginKey: "",
      loginCode: "",
      isTrue: false,
    };
  },
  watch: {
    phoneNum(newval, oldval) {
      this.isTrue = this.$u.test.mobile(newval);
    },
  },
  onShow() {
    const userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      uni.switchTab({
        url: "/pages_doctor/index/index",
      });
    }
  },
  mounted() {
    this.getImgCode();
  },
  methods: {
    getImgCode() {
      complaintUpdate().then((res) => {
        this.imgCode = res.data.code;
        this.loginKey = res.data.key;
      });
    },
    gotoAddUser() {
      uni.navigateTo({
        url: "/pages_doctor/attestation/index?type=2",
      });
    },
    async onGetPhoneNumber(val) {
      if (!this.checked) {
        return uni.showToast({
          title: "请先勾选用户协议和隐私协议！",
          icon: "none",
          duration: 3000,
        });
      }
      if (val.detail.errMsg === "getPhoneNumber:ok") {
        const { iv, encryptedData } = val.detail;
        phonetokenadmin({
          account: this.phoneNum,
          grantType: "only_phone",
          code: val.detail.code,
          userType: "2",
          tenantId: website.tenantId,
        }).then((res) => {});
      }
    },
    loginFun() {
      const params = {
        account: this.phoneNum,
        autoLogin: false,
        code: this.loginCode,
        key: this.loginKey,
        pwd: this.password,
        rememberPassword: false,
        wxCode: "",
      };
      adminApph6login(params).then((res) => {
        if (res.code !== 200) {
          this.getImgCode();
          uni.showToast({
            title: res.message,
            icon: "none",
          });
        } else {
          uni.setStorageSync("userInfo", res.data);
          uni.setStorageSync("merId", res.data.merId);
          uni.switchTab({
            url: "/pages_sh/index/index",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  width: 100%;
  margin: 0 auto;
}
.logo-top{
	width: 100%;
	height: 200px;
}
.logo-container {
  text-align: center;
}

.logo {
  width: 160rpx;
  height: 40rpx;
}

.welcome-text {
  margin-top: 60rpx;
  font-size: 36rpx;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
  font-family: "Arial", sans-serif;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-label {
  margin-top: 30rpx;
  font-size: 26rpx;
  color: #505050;
}

.input-field {
  margin-top: 10rpx;
}

.input_class {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  border: none;
  border-bottom: 1px solid #b8b8b8;
  padding: 5rpx 0;
}

.captcha-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.captcha-image {
  width: 400rpx;
  height: 80rpx;
  cursor: pointer;
}

button {
  margin-top: 60rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #00dc88;
  color: #fff;
  border: none;
  font-size: 30rpx;
  width: 100%;
}

.falsecalss {
  background: #cfd3de;
}

.register-link {
  margin-top: 50rpx;
  text-align: center;
  font-size: 13px;
  color: #999;
  letter-spacing: 3px;
  cursor: pointer;
}
</style>
